Highcharts এর একটি বিশেষ সংস্করণ Highstock, যা প্রধানত স্টক এবং আর্থিক ডেটা ভিজুয়ালাইজেশনের জন্য ডিজাইন করা হয়েছে। এটি স্টক মার্কেটের ডেটা, অর্থনৈতিক সূচক, এবং অন্যান্য আর্থিক ডেটা প্রদর্শন করতে সক্ষম। Highstock ব্যবহার করে আপনি ইন্টারঅ্যাকটিভ গ্রাফ তৈরি করতে পারেন যা সময়ের সাথে আর্থিক ডেটার পরিবর্তন চিত্রিত করে।
Highstock কী?
Highstock হল Highcharts এর একটি সংস্করণ, যা স্টক এবং ফিনান্সিয়াল চার্ট তৈরির জন্য বিশেষভাবে উপযোগী। এটি প্রাথমিকভাবে টাইম সিরিজ ডেটা দেখানোর জন্য তৈরি, যেমন শেয়ারের মূল্য, মুদ্রার মান, সূচকের মূল্য ইত্যাদি। Highstock লাইব্রেরি তথ্য ফিল্টারিং, ইন্টারঅ্যাকটিভিটি, এবং ট্রেন্ড লাইন সাপোর্টের জন্য অত্যন্ত কার্যকর।
Highstock এর বৈশিষ্ট্য
1. টাইম সিরিজ ডেটা:
Highstock সময়ের সাথে ডেটা পরিবর্তন প্রদর্শন করার জন্য আদর্শ, যেখানে আপনি বিভিন্ন ধরনের স্টক বা আর্থিক তথ্যকে সময় অনুযায়ী ভিজুয়ালাইজ করতে পারেন।
2. ইন্টারঅ্যাকটিভ চার্ট:
Highstock ব্যবহারকারীদের জুম ইন, জুম আউট, এবং স্ক্রোলিং করার সুবিধা দেয়, যা আর্থিক ডেটার বিশ্লেষণে সহায়ক।
3. বিভিন্ন ধরনের চার্ট:
Highstock বিভিন্ন ধরনের লাইনের চার্ট, ক্যান্ডেলস্টিক চার্ট, ওহল (OHLC) চার্ট ইত্যাদি তৈরি করতে সক্ষম, যা স্টক মার্কেটের বিশ্লেষণে ব্যবহৃত হয়।
4. ট্রেন্ড লাইন এবং টুলটিপস:
Highstock ব্যবহারকারীদের জন্য বিভিন্ন ট্রেন্ড লাইন এবং টুলটিপস অপশন প্রদান করে, যা গ্রাফের উপর অতিরিক্ত বিশ্লেষণ করতে সহায়ক।
Highstock Integration
Highstock লাইব্রেরি ইন্টিগ্রেট করতে Highcharts CDN লিঙ্ক ব্যবহার করতে হয়। Highcharts এর মূল লাইব্রেরি এবং Highstock এর লাইব্রেরি দুটি আলাদা। নিচে Highstock চার্ট ইন্টিগ্রেট করার উদাহরণ দেখানো হলো।
Highstock Integration Example
<!DOCTYPE html>
<html>
<head>
<title>Highstock Chart Example</title>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
</head>
<body>
<div id="container" style="width: 100%; height: 400px;"></div>
<script>
Highcharts.stockChart('container', {
chart: {
type: 'line' // লাইন চার্ট টাইপ
},
title: {
text: 'স্টক মার্কেট ডেটা'
},
rangeSelector: {
selected: 1
},
xAxis: {
type: 'datetime' // টাইম সিরিজ ডেটার জন্য X-Axis টাইপ নির্ধারণ
},
yAxis: {
title: {
text: 'মূল্য (Price)'
}
},
series: [{
name: 'স্টক মূল্য',
data: [
[Date.UTC(2023, 0, 1), 100], // [timestamp, value]
[Date.UTC(2023, 0, 2), 105],
[Date.UTC(2023, 0, 3), 110],
[Date.UTC(2023, 0, 4), 115],
[Date.UTC(2023, 0, 5), 120]
],
tooltip: {
valueDecimals: 2
}
}]
});
</script>
</body>
</html>
এখানে:
- type: 'line': চার্টের ধরন নির্বাচন করা হয়েছে।
- xAxis: type: 'datetime': X-Axis এ টাইম সিরিজ ডেটা ব্যবহার করা হয়েছে।
- rangeSelector: এই অপশনটি ব্যবহারকারীদের টাইম পিরিয়ড নির্বাচন করতে দেয়, যেমন আজ, এক সপ্তাহ, এক মাস ইত্যাদি।
- series: এখানে একটি স্টক ডেটার সিরিজ দেয়া হয়েছে যা একটি নির্দিষ্ট সময়কালে স্টক প্রাইস পরিবর্তন দেখাচ্ছে।
Highstock দিয়ে ক্যান্ডেলস্টিক (Candlestick) এবং OHLC (Open-High-Low-Close) চার্ট
Highstock এর একটি শক্তিশালী বৈশিষ্ট্য হল ক্যান্ডেলস্টিক এবং OHLC চার্ট তৈরি করার ক্ষমতা, যা স্টক মার্কেট বা ফাইন্যান্সিয়াল ডেটা বিশ্লেষণে খুবই জনপ্রিয়। ক্যান্ডেলস্টিক চার্ট স্টক প্রাইসের ওপেন, হাই, লো এবং ক্লোজ ভ্যালু দেখায়, যা বিনিয়োগকারীদের জন্য অত্যন্ত উপকারী।
ক্যান্ডেলস্টিক চার্ট উদাহরণ:
<!DOCTYPE html>
<html>
<head>
<title>Highstock Candlestick Chart</title>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
</head>
<body>
<div id="container" style="width: 100%; height: 400px;"></div>
<script>
Highcharts.stockChart('container', {
chart: {
type: 'candlestick' // ক্যান্ডেলস্টিক চার্ট
},
title: {
text: 'ক্যান্ডেলস্টিক চার্ট'
},
rangeSelector: {
selected: 1
},
xAxis: {
type: 'datetime' // টাইম সিরিজ ডেটা
},
yAxis: {
title: {
text: 'মূল্য (Price)'
}
},
series: [{
name: 'স্টক প্রাইস',
data: [
[Date.UTC(2023, 0, 1), 100, 105, 95, 100], // [timestamp, open, high, low, close]
[Date.UTC(2023, 0, 2), 105, 110, 100, 105],
[Date.UTC(2023, 0, 3), 110, 115, 105, 110],
[Date.UTC(2023, 0, 4), 115, 120, 110, 115],
[Date.UTC(2023, 0, 5), 120, 125, 115, 120]
]
}]
});
</script>
</body>
</html>
এখানে:
- type: 'candlestick': ক্যান্ডেলস্টিক চার্ট টাইপ নির্বাচন করা হয়েছে।
- data: প্রতিটি ক্যান্ডেলস্টিকের জন্য [timestamp, open, high, low, close] মান প্রদান করা হয়েছে।
OHLC চার্ট উদাহরণ:
<!DOCTYPE html>
<html>
<head>
<title>Highstock OHLC Chart</title>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
</head>
<body>
<div id="container" style="width: 100%; height: 400px;"></div>
<script>
Highcharts.stockChart('container', {
chart: {
type: 'ohlc' // OHLC চার্ট
},
title: {
text: 'OHLC চার্ট'
},
rangeSelector: {
selected: 1
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'মূল্য (Price)'
}
},
series: [{
name: 'স্টক প্রাইস',
data: [
[Date.UTC(2023, 0, 1), 100, 105, 95, 100], // [timestamp, open, high, low, close]
[Date.UTC(2023, 0, 2), 105, 110, 100, 105],
[Date.UTC(2023, 0, 3), 110, 115, 105, 110],
[Date.UTC(2023, 0, 4), 115, 120, 110, 115],
[Date.UTC(2023, 0, 5), 120, 125, 115, 120]
]
}]
});
</script>
</body>
</html>
এখানে OHLC চার্টের জন্য ohlc টাইপ ব্যবহার করা হয়েছে, এবং open, high, low, এবং close মানগুলির মধ্যে পার্থক্য চিত্রিত হচ্ছে।
উপসংহার
Highstock স্টক মার্কেট এবং আর্থিক ডেটার বিশ্লেষণে একটি শক্তিশালী টুল। এটি টাইম সিরিজ ডেটা, ক্যান্ডেলস্টিক চার্ট, OHLC চার্ট এবং ইন্টারঅ্যাকটিভ ট্রেন্ড লাইন সমর্থন করে, যা অর্থনৈতিক এবং স্টক বিশ্লেষণের জন্য অত্যন্ত উপকারী। Highcharts এর মাধ্যমে Highstock ইন্টিগ্রেট করা এবং চার্ট তৈরি করা সহজ এবং কার্যকরী, যা বিনিয়োগকারীদের জন্য শক্তিশালী তথ্য প্রদান করতে সহায়ক।
Read more
